<template>
  <div class="menu-content">
    <el-table
      :data="_menuList"
      style="width: 100%; margin-bottom: 20px"
      row-key="id"
      @cell-click="cellCilck"
      :row-class-name="row"
      border
      height="100%"
      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
    >
      <el-table-column prop="seq" label="序号" sortable width="180">
        <template slot-scope="scope">
          <el-input
            style="width: 100px"
            v-if="scope.row.index === tabClickIndex"
            v-model="inputObj.seq"
          />
          <span v-else>{{ scope.row.seq }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="name" label="菜单名称" sortable width="180">
        <template slot-scope="scope">
          <el-input
            style="width: 100px"
            v-if="scope.row.index === tabClickIndex"
            v-model="inputObj.name"
          />
          <span v-else>{{ scope.row.name }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="path" label="路径">
        <template slot-scope="scope">
          <el-input
            style="width: 100px"
            v-if="scope.row.index === tabClickIndex"
            v-model="inputObj.path"
          />
          <span v-else>{{ scope.row.path }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="rights" label="菜单权限"></el-table-column>
      <el-table-column prop="show" label="是否展示（0代表否，1代表是）">
        <template slot-scope="scope">
          <el-select
            style="width: 100px"
            v-if="scope.row.index === tabClickIndex"
            v-model="inputObj.show"
            placeholder="请选择"
          >
            <el-option
              v-for="item in options"
              :key="item"
              :label="item"
              :value="item"
            >
            </el-option>
          </el-select>
          <span v-else>{{ scope.row.show }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="remark" label="备注">
        <template slot-scope="scope">
          <el-input
            style="width: 100px"
            v-if="scope.row.index === tabClickIndex"
            v-model="inputObj.remark"
          />
          <span v-else>{{ scope.row.remark }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <div class="bj" v-if="scope.row.index !== tabClickIndex">
            <el-button size="mini" @click="bottonEvt('bj')">编辑</el-button>
            <el-button
              size="mini"
              v-if="scope.row.parent_id !== null && scope.row.parent_id !== ''"
              type="danger"
              @click="bottonEvt('sc')"
              >删除</el-button
            >
          </div>
          <div class="qr" v-else>
            <el-button size="mini" @click="bottonEvt('qr')">确认</el-button>
            <el-button size="mini" @click="bottonEvt('qx')">取消</el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
export default {
  data() {
    return {
      options: [0, 1],
      tabClickIndex: "",
      menuList: [],
      menu: [],
      botton: "",
      showBtn: true,
      inputObj: {
        seq: 0,
        name: "",
        path: "",
        rights: "",
        show: 1,
        remark: "",
      },
    };
  },
  created() {
    this.menu = this.$store.getters["common/menuList"]
    this.menuList = this.loop(this.menu)
  },
  computed: {
    _menuList() {
      return this.menuList;
    },
  },
  watch: {
    _menuList: {
      immediate: true,
      handler(_list) {
        return _list
      },
    },
  },
  methods: {
    row({ row, rowIndex }) {
      row.index = rowIndex;
    },
    cellCilck(data) {
      console.log(this.button);
      if (this.botton === "bj") {
        this.tabClickIndex = data.index;
        this.showBtn = false;
        this.inputObj.remark = data.remark;
        this.inputObj.seq = data.seq;
        this.inputObj.name = data.name;
        this.inputObj.path = data.path;
        this.inputObj.rights = data.rights;
        this.inputObj.show = data.show;
      }
      if (this.botton === "qx") {
        this.tabClickIndex = null;
        this.showBtn = true;
      }
      if (this.botton == "qr") {
        this.tabClickIndex = null;
        this.showBtn = true;
        let _menu = this.menu.map((it) => {
          if (it.id === data.id) {
            it = { ...data, ...this.inputObj };
          }
          return it;
        });
        this.menuList = this.loop(_menu);
        this.botton = ''
      }
    },
    bottonEvt(type) {
      console.log('---------');
      this.botton = type;
    },
    loop(_list, _id) {
      return _list
        .filter((_it) => {
          if (_id === undefined) {
            if (_it.parent_id === null || _it.parent_id === "") return _it;
          } else {
            if (_it.parent_id === _id) return _it;
          }
        })
        .map((_item) => {
          if (_list.findIndex((_it) => _it.parent_id === _item.id) > -1) {
            _item.children = this.loop(_list, _item.id);
          } else {
            _item.children = [];
          }
          return _item;
        });
    },
  },
};
</script>
<style lang="less" scoped>
.menu-content {
  width: 100%;
  height: calc(100% - 48px);
  display: block;
  padding: 10px;

  .el-table {
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
  }
}
</style>